<template>
	<!-- 船源订单管理 -->
	<view class="main-all">
		<view class="main-head">
			<view class="head-second">
				<image color="#999" src="@/static/icon/search.png" @click="getlists"></image>
				<input  confirm-type="search" v-model="searchValue" placeholder="搜索订单号/货物名称"/>
			</view>
			<view class="head-third" @click="getlists">
				搜索
			</view>
		</view>
		<uni-orders  :current="indexActive" :values="items" :num= "num" style-type="text" active-color="#0091E6" @clickItem="_onClickItem" />
		<!-- <order-list @stauts="getstauts" :num="num"></order-list> -->
		
		<view class="centent-second">
			<view class="centent-list" v-for="(tem,index) in cylist">
				<view class="list-first">
					<view @click="goPage(tem.id)">
						<image src="@/static/img/right.png" style="width: 30upx;height: 30upx;top: 5upx;"></image>
						{{tem.code}}
					</view>
					<view><image src="@/static/img/head.png"></image>{{tem.typename}}</view>
				</view>
				<view class="list-second" @click="goPage(tem.id)">
					<view >{{tem.proname}}</view>
					<view >{{tem.allprice}}元</view>
				</view>
				<view class="list-third">下单时间:{{tem.addtime}},{{tem.yfuname}},{{tem.yfsjh}}</view>
				<view class="list-four">
					<view class="list-four-first">{{tem.flagname}}</view>
					<view class="list-four-third" v-if="tem.sffk == 0">
						<image src="@/static/img/money.png"></image>
						未付款
					</view>
					<view class="list-four-four" @tap="goPages(tem.id,tem.code,tem.dddj,tem.allprice)" v-if="tem.yfht.length == 0">
						<image src="@/static/img/noSigned.png"></image>
						签合同
					</view>
					<view class="list-four-four" v-if="tem.flag == 1 && tem.sffk == 1 "  @click="orderisget(tem.id,tem.code,tem.proid)">
						<image src="@/static/img/noqueren.png"></image>已送达
					</view>
					<view class="list-four-four" v-if="tem.flag == 0"  @click="toquer(tem.id,tem.code,tem.proid)">
						<image src="@/static/img/noqueren.png"></image>确认
					</view>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
		<!-- 确定订单弹框 -->
		<uni-popup :show="querenValue" position="middle" mode="fixed">
			<view class="popup-view">
				<view @click="querenValue = false" style="position: absolute;right: 20upx;">
					<image src="@/static/img/cancel.jpg" style="width: 35upx;height: 35upx;"></image>
				</view>
				<!-- <view class="popup-second">
					<image src="@/static/img/cancel.jpg" style="width: 35upx;height: 35upx;"></image>
				</view> -->
				<view class="popup-third">您确认此订单吗？</view>
				<view class="popup-four">确认一致，订单将进入签合同阶段！</view>
				<view class="popup-button">
					<view @click="get_order(0)">取消</view>
					<view @click="get_order(1)" type="default">是的，确认</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 确定已送达弹框 -->
		<uni-popup :show="isgetValue" position="middle" mode="fixed">
			<view class="popup-view">
				<view @click="isgetValue = false" style="position: absolute;right: 20upx;">
					<image src="@/static/img/cancel.jpg" style="width: 35upx;height: 35upx;"></image>
				</view>
				<!-- <view class="popup-second">
					<image src="@/static/img/cancel.jpg" style="width: 35upx;height: 35upx;"></image>
				</view> -->
				<view class="popup-third">确认已经送达货了吗？</view>
				<view class="popup-four">确认之后，订单将进入已到达阶段！</view>
				<view class="popup-button">
					<view @click="order_isget(0)">取消</view>
					<view @click="order_isget(1)" type="default">是的，确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniOrders from '@/components/uni-segmented-control/uni-orders.vue';
	import { secondorders, secondordersNum,secondquerorder,secondorderisget} from '@/service/getData.js';
	import { router, toast } from '@/common/util.js';
	import orderList from '@/components/order-list/order-list.vue';
	import { mapState, mapActions, mapMutations } from 'vuex';
	export default{
		components: {
			uniOrders,
			orderList
		},
		data() {
			return {
				items: ['全部', '未确定','未签订','未付款','托运中','已送达','已签收'],
				indexActive: 0,
				ordernum: 0,//订单数量
				searchValue: '', // 搜索的值
				cylist: [],
				page: 1,
				loadingType: 'noMore',
				stauts: -1, //订单状态 1未确认订单 2未签订合同订单 3未付款订单4托运中订单 5 订单已送达 6 订单已签收-1 所有订单
				querenValue: false,
				isgetValue: false,
				num: 0,
				proid: '', // 对应货源编号
				ordercode: '', // 订单号
				orderid: '', // 订单编号
			}
		},
		computed: mapState(['userInfo', 'hasLogin']),
		onLoad(){
			// this.getlists('init');
		},
		onPullDownRefresh() {
			this.getlists();
		},
		onReachBottom() { // 上拉触底
		    this.getlists('ReachBottom');
		},
		onShow(){
			this.getlists();
		},
		methods:{
			_onClickItem(index){
				this.indexActive = index;
				if(index == 0){
					this.stauts = -1;
				}else{
					this.stauts = index;
				}
				this.cylist = [];
				this.num = 0;
				this.getlists();
			},
			// getstauts(data){
			// 	this.stauts = data;
			// 	this.cylist = [];
			// 	this.num = 0;
			// 	this.getlists();
			// },
			
			//弹出确认弹框
			toquer(id,code,proid){
				this.orderid = id;
				this.ordercode = code;
				this.proid = proid;
				this.querenValue = true;
			},
			// 确认订单
			get_order(num) {
				if(num == 0){
					console.log("取消订单");
				}else{
					let sent ={
						"type":"orderact",
						"acttype":"1",
						"ordertype": "2",
						"orderid":this.orderid,
						"ordercode":this.ordercode,
						"proid":this.proid,
						"uid":this.userInfo.uid ,
						"uname":this.userInfo.uname
					}
					console.log(sent);
					toast.loading();
					secondquerorder({data:sent}).then(res => {
						toast.hideLoading();
						console.log(res.data);
						var tem = eval('('+res.data+')');
						if(tem[0].stat == "1"){
							toast.show("确认成功！");
							this.getlists();
						}
					})
				}
				this.querenValue = false;
			},
			goPage(id) {
				uni.setStorage({
					key:'ordertype',
					data: '2',
					success: function () {
						//下订单
						console.log(id)
						router.navigateTo('/pages/order/place-order/place-order?id='+id);	
					}
				})
			},
			goPages(id,code,dddj,allprice){
				var arry ={
					orderid:id,
					ordercode:code,
					dddj:dddj,
					htprice:allprice,
				}
				uni.setStorage({
				    key: 'htinfo',
				    data: arry,
				    success: function () {
						//签合同
				       router.navigateTo('/pages/order/signContract/signContract');
				    }
				});
			},
			// 货物已送达
			orderisget(id,code,proid){
				this.orderid = id;
				this.ordercode = code;
				this.proid = proid;
				this.isgetValue = true;
			},
			order_isget(num){
				if(num == 1){
					let sent ={
						"type":"orderact",
						"acttype":"3",
						"ordertype":"2",
						"orderid":this.orderid,
						"ordercode":this.ordercode, 
						"uid":this.userInfo.uid, 
						"uname":this.userInfo.uname,
						"proid":this.proid,
					}
					toast.loading();
					console.log(sent)
					secondorderisget({data:sent}).then(res => {
						toast.hideLoading();
						console.log(res.data)
						var tem = eval('('+res.data+')');
						if(tem[0].stat == "1"){
							toast.show("送达成功！");
							this.getlists();
						}
					} );
				}
				this.isgetValue = false;
			},
			getlists(type = 'DownRefresh'){
				if (type == 'DownRefresh') {
				    this.page = 1;
				    this.loadingType = 'more';
					toast.loading();
				}
				if (type == 'ReachBottom') {
				    if (this.loadingType == 'noMore') return;
				    this.loadingType = 'loading';
				}
				let arr = {
					"type":"hyordercount",
					// "uid":this.userInfo.uid,
					"uid": "121",
					"stauts":this.stauts,
					"key":this.searchValue,
					"sf":"2",
					"ordertype":"2"
				}
				secondordersNum({data:arr}).then(res => {
					var getnum = eval('('+res.data+')');
					this.num = parseInt(getnum[0].ordercount);
				} );
				
				let sent = {
					"type":"hyorderlist",
					// "uid":this.userInfo.uid,
					"uid":"121",
					"sf":"2",
					"stauts":this.stauts,
					"key":this.searchValue,
					"ordertype":"2",
					"orderid":"0",
					"page":this.page,
					"size":"10",
				}
				console.log(sent);
				toast.loading();
				secondorders({data:sent}).then(res => {
					if (type == 'DownRefresh') {
					    uni.stopPullDownRefresh();
					}
					toast.hideLoading();
					if(res.data == ''){ 
						this.loadingType = 'noMore';
					}else {
						console.log(res.data)
						var getdata = eval('('+res.data+')');
						if (this.page == 1) {
						    this.cylist = getdata[0].meslist; 
		                } else {
		                    this.cylist = this.cylist.concat(getdata[0].meslist);
		                }
		               if(getdata[0].meslist.length < 10){
		                   this.loadingType = 'noMore';								
		               }else{
		                    this.loadingType = 'more';
							this.page ++;
		               }
					}
				})
			}
			
		}
	}
</script>

<style lang="scss">
	image{
		width: 40upx;
		height: 40upx;
	}
	.main-all{
		margin: 0;
		padding: 0;
		width: 100%;
		background-color: #ffffff;
		.main-head{
			display: flex;
			flex-direction: row;
			padding: 30upx;
			color: #5d5d5d;
			background-color: #0091e6;
			.head-second{
				border: 1upx solid #ffffff;
				padding: 14upx 20upx;
				border-radius: 50upx;
				background-color: #ffffff;
				width: 80%;
				display: flex;
				flex-direction: row;
				input{
					font-size: 30upx;
					margin-left: 20upx;
				}
			}
			.head-third{
				padding: 12upx 20upx;
				font-size: 35upx;
				color: #ffffff;
				border-radius: 10upx;
				position: absolute;
				right: 20upx;
			}
		}
		.centent-second{
			margin: auto;
			.centent-list{
				border-bottom: 1upx solid #d9d9d9;
				font-size: 30upx;
				padding: 10upx 10upx 10upx 30upx;
				image{
					width: 40upx;
					height: 40upx;
					top: 12upx;
					right: 5upx;
				}
				.list-first{
					display: flex;
					flex-direction: row;
					padding: 10upx 0;
					color: #959595;
					view:nth-child(1){
						padding: 10upx 0;
					}
					view:nth-child(2){
						margin-left: 40upx;
					}
				}
				.list-second{
					display: flex;
					flex-direction: row;
					padding: 10upx 0;
					margin-top: 10upx;
					font-size: 34upx;
					view:nth-child(2){
						color: #007AFF;
						position: absolute;
						right: 40upx;
					}
				}
				.list-third{
					color: #959595;
					padding: 10upx 0;
				}
				.list-four{
					color: #000000;
					display: flex;
					flex-direction: row;
					padding: 10upx 0;
					.list-four-first{
						margin-top: 12upx;
						font-size: 26upx;
					}
					.list-four-second{
						margin-left: 20upx;
						color: red;
						margin-top: 12upx;
						font-size: 26upx;
					}
					.list-four-third{
						margin-left: 20upx;
						font-size: 26upx;
					}
					.list-four-four{
						color: #007AFF;
						position: absolute;
						right: 40upx;
						font-size: 26upx;
					}
					.list-five{
						color: #000000;
					}
				}
			}
		}
		.popup-view{
			display: flex;
			flex-direction: column;
			background-color: #fff;
			width: 240px;
			text-align: center;
			.popup-second{
				margin-top: 50upx;
				image{
					width: 100upx;
					height: 100upx;
				}
			}
			.popup-third{
				font-size: 40upx;
				color: #000000;
				padding: 20upx 0;
			}
			.popup-four{
				font-size: 30upx;
				color: #8c8c8c;
				padding: 20upx 0;
			}
			.popup-button{
				display: flex;
				flex-direction: row;
				color: #ffffff;
				font-size: 30upx;
				margin-top: 30upx;
				padding: 10upx 20upx 0 20upx;
				view:nth-child(1){
					background-color: #c5c5c5;
					border: 1upx solid #c5c5c5;
					border-radius: 10upx;
					padding: 20upx 50upx;
				}
				view:nth-child(2){
					background-color: red;
					margin-left: 40upx;
					border: 1upx solid red;
					border-radius: 10upx;
					padding: 20upx 50upx;
				}
			}
		}
	}
</style>
